<template>
	<view class="chooseTypeCar">
		<view class="top">
			<navigator open-type="navigateBack" delta="1">
				<image src="https://z3.ax1x.com/2021/04/08/cYSVW4.png" ></image>
			</navigator>
			<view class="top-title">
				请选择车型
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-content">
				<view class="brand-logo">
						<image src="https://z3.ax1x.com/2021/04/10/calves.png" class="brand-img"></image>
						<view class="brand-text">{{currentCar}}</view>
				</view>
				<view class="brand-nav">
						<view class="brand-nav-text">
							1.8L
						</view>
						<image src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png" mode=""></image>
						<view class="brand-nav-text">
							2006
						</view>
						<image src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png" mode=""></image>
				</view>
			</view>
			<view class="bottom-content-type">
					<view class="type-title">请选择车型</view>
					<view class="type-content" v-for="item in carType" :key="item.id">
						<view class="type-content-item">
							<navigator :url="'/pages/home/chooseMaintainStore?currentCar='+currentCar">
								<text>{{item.text}}</text>
							</navigator>
						</view>
					</view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carType:[
				 {id:0,text:"2006款，1.8L，手动"},
				 {id:1,text:"2006款，1.8L，自动"}
				],
				currentCar:null
			};
		},
		onLoad(options) {
			this.currentCar = options.currentCar
		},
		methods:{
		},
		computed:{
		}
	}
</script>

<style lang="scss" scoped>
	.chooseTypeCar{
		.top{
			width: 100vw;
			height: 200rpx;
			box-sizing: border-box;
			background-image: linear-gradient(to right,#FF7C16,#FF5401);
			display: flex;
			align-items: center;
			padding-top: 120rpx;
			box-sizing: border-box;
			image{
				width: 64rpx;
				height: 64rpx;
			}
			.top-title{
				margin-left: 220rpx;
				color: white;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.bottom{
			width: 100vw;
			height: 100vh;
			.bottom-content{
				margin-bottom: 20rpx;
				.brand-logo{
					width: 100vw;
					background-color: #f9f9f9;
					display: flex;
					flex-wrap: wrap;
					display: flex;
					align-items: center;
					.brand-img{
						margin-left: 30rpx;
						margin-right: 30rpx;
						width:100rpx;
						height: 100rpx;
					}
				}
				.brand-nav{
					height: 80rpx;
					display: flex;
					align-items: center;
					font-weight: bold;
					padding-left: 30rpx;
					box-sizing: border-box;
					image{
						width: 18rpx;
						height: 20rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
			}
			.bottom-content-type{
				.type-title{
					font-size: 32rpx;
					width: 100vw;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					background-color: #f9f9f9;
				}
				.type-content{
					width: 100vw;
					height: 100rpx;
					.type-content-item{
						height: 100rpx;
						display: flex;
						align-items: center;
						box-sizing: border-box;
						padding-left: 30rpx;
						border-bottom: 1px solid #f9f9f9;
						// &:nth-of-type(4){
						// 	border-bottom:none ;
						// }
					}
				}
			}
			
		}
	}
</style>
